<template>
  <div class="hard">
    <!-- 轮播 -->
    <div class="banner"></div>
    <!-- 硬件产品 -->
    <div class="bg">
      <!-- 动画 -->
      <div class="center">
        <ul class="clearfix">
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
          <li><img src="/img/hardware/DJ_m.jpg" alt="" /></li>
        </ul>
      </div>
      <!-- 硬件分类 -->
      <div class="hardbox">
        <div class="navcenter">
          <!-- 分类导航 -->
          <div class="hardnav">
            <ul>
              <li><router-link to="" class="anav">全部产品</router-link></li>
              <li>
                <router-link to="" class="anav" >智能垃圾回收房</router-link>
              </li>
              <li>
                <router-link to="" class="anav">智能垃圾回收亭</router-link>
              </li>
              <li>
                <router-link to="" class="anav">只能垃圾回收机</router-link>
              </li>
              <li><router-link to="" class="anav">智能售卖机</router-link></li>
            </ul>
          </div>
          <!-- 硬件列表 -->
          <ul class="hardList">
            <li v-for="(hard,h) of hard" :key="h">
               
              <router-link :to="`/detail/${hard.hid}`" class="a">
                <img src="/img/hardware/hot.png" alt="" class="hot" />
                <img :src="`${hard.himg}`" alt="" />
                <p>{{hard.hname}}</p>               
              </router-link>
            </li>
           
            
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      hard:[]
    }
  },
  methods:{
     hardAxios(){
      this.axios.get('v1/products/hard').then((res)=>{
        console.log(res.data.data);
        this.hard=res.data.data;
      })
    }
  },
  mounted(){
    this.hardAxios();
  }
}
</script>
<style lang="scss">
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-800px);
  }
}
.hard {
  // 轮播
  .banner {
    width: 100%;
    height: 400px;
    background-image: url(/img/hardware/banner_hardware.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  //   硬件产品
  .bg {
    width: 100%;
    background-color: #f9f9f9;
    .center {
      //   background-color: aqua;
      margin: 0 auto;
      width: 1200px;
      padding-top: 20px;
      overflow: hidden;

      ul:hover {
        animation-play-state: paused;
      }
      ul {
        width: 2400px;
        height: 130px;
        animation: 15s move linear infinite;
        list-style: none;

        li {
          border: 1px solid #efefef;
          width: 150px;
          height: 95px;
          line-height: 95px;
          margin-right: 20px;
          float: left;
          img {
            display: block;
            width: 150px;
            height: 90px;
            margin: 0 auto;
          }
        }
      }
    }
    //硬件分类
    .hardbox {
      background-color: #f9f9f9;
      margin-top: 20px;
      .navcenter {
        background-color: #fff;
        width: 1200px;
        margin: 0 auto;
        padding: 0 45px;
        // 分类导航
        .hardnav {
          height: 60px;
          margin-bottom: 4px;
          ul {
            float: left;
            list-style: none;
            li {
              float: left;
              font-size: 18px;
              font-weight: 700;
              margin-left: 28px;
              &:hover .anav {
                color: #ffc802;
                border-bottom: 3px solid #ffc802;
              }
              .anav {
                display: inline-block;
                height: 60px;
                line-height: 60px;
                text-decoration: none;
                color: black;
                padding: 0 10px;
              }
            }
          }
        }
        // 硬件列表
        .hardList {
          height: 1320px;
          list-style: none;
          li:hover {
            border: 1px solid #ffc802;
          }
          li {
            width: 361px;
            height: 238px;
            border: 1px solid #d1d1d1;
            border-radius: 5px;
            margin-right: 30px;
            margin-top: 20px;
            float: left;
             
            .a {
              position: relative;
              text-decoration: none;
              .hot{
                  width:20px;
                  height: 22px;
                  display: inline-block;
                  position: absolute;
                  left:30px;
              }
              img {
                display: block;
                width: 240px;
                height: 140px;
                margin: 0 auto;
                margin-top: 30px;
              }
              p {
                font-size: 16px;
                font-weight: 400;
                color: #333;
                text-align: center;
                line-height: 18px;
                margin-top: 20px;
                text-decoration: none;
              }
             
            }
          }
        }
      }
    }
  }
}
</style>